<template>
  <div class="search">
    <i class="el-icon-search"></i>
    <el-input v-model="input"
              @input="filters('input')" 
              @focus="onInputFocus"
              @blur="onInputBlur"
              class="input" 
              placeholder="搜索姓名或地址">
    </el-input>
    <el-button :class="{'active':isActive}" @click="$router.push({name: 'realmName'})">搜 索</el-button>
    </div>
</template>

<script>
export default {
  name: 'search',
  data () {
    return {
      input:'',
      isActive:false
    }
  },
  computed:{
      filters (value) {
        if (!value) return ''
        if (value.length > 45) {
            return value.slice(45,value.length)
        }
        return value
     }
        
  },
  methods:{
      onInputFocus(){
          this.isActive = true;
      },
      onInputBlur(){
           this.isActive = false;
      }
  }
  
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.search{
   display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 48px;
  width: 560px;
  background-color: rgba(51, 51, 51, 0.6);
  border-radius: 10px;
}
.search img{
  width: 55px;
  height: auto;
}
.search span{
  font-size: 20px;
  font-weight: bold;
  margin:48px 0;
}
.search i{
  height: 48px;
  width: 48px;
  line-height: 48px;
  color: #4d4d4d;
  text-align: center;
}
.search .el-input{
    flex: 1;
}
.search .el-button{
    text-align: center;
    color: #fff;
    padding:0;
    border-radius: 0 10px 10px 0;
    width: 80px;
    height: 100%;
    background-color: #403f3e;
    border:none;
    font-size: 16px;
}
.search .el-button span{
    color: #666;
    font-size: 16px;
    font-weight: normal;
}
.search .el-button.active{
    font-size: 16px;
    font-weight: normal;
    background-color: #f2b92c;
}
.search .el-button.active span{
    color: #fff;
}
.el-input__inner{
    background-color:inherit;
     border:none;
}
.el-input__inner::-webkit-input-placeholder {
    color: #4d4d4d;
}
.el-input__inner::-moz-input-placeholder {
color: #4d4d4d;
}
.el-input__inner:-ms-input-placeholder {
color: #4d4d4d;
}
</style>
